<template>
    <!-- （3个循环）轮播效果 -->
    <div>
              <div class="middle-content" v-if="visitid[0]" >
                <el-container class="inner-content">
                  <el-main>
                    <div class="middle-h">
                      <img src="../../../static/image/earth.png" alt="地区数据统计">
                      <span> 今日游客分布</span>
                    </div>
                    <div class="middle-map">
                      <!-- 暂用地图 -->
                      <img class="map-img" src="../../../static/image/map-ninghai.png" alt="">
                      <div class="svgMap">
                        <my-svg width="100%" height="100%"></my-svg>
                      </div>
                    </div>  
                  </el-main>
                  <el-aside width="36%" class="middle-aside">
                    <!-- 重点区域人流量/重点区域客流量 -->
                    <div class="ren-num">
                      <h6 class="liuliang">重点区域客流量</h6>
                      <el-table
                      :data="tableData"
                      :show-header=false
                      :border=false
                      :highlight-current-row=false
                      style="background-color:transparent;border:none;position:relative;left:11%;top:13px;width: 83%;min-width：330px;font-size：12em;"
                      height="70%"
                      >
                      <el-table-column
                        prop="date"
                        width="50vw"
                        style="border:none;">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        width="66vw"
                        style="border:none;">
                      </el-table-column>
                      <el-table-column
                        prop="province"
                        width="50vw"
                        style="border:none;">
                      </el-table-column>
                      </el-table>


                    </div>
                  
                    <div class="ke-num">
                      <h6 class="liuliang">重点乡镇客流量</h6>
                      <el-table
                      :data="tableData2"
                      :show-header=false
                      :border=false
                      :highlight-current-row=false
                      style="background-color:transparent;border:none;position:relative;left:11%;top:13px;width: 83%;min-width：330px;font-size：12em;"
                      height="100%"
                      >
                      <el-table-column
                        prop="date"
                        width="50vw"
                        style="border:none;">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        width="66vw"
                        style="border:none;">
                      </el-table-column>
                      <el-table-column
                        prop="num"
                        width="50vw"
                        style="border:none;">
                      </el-table-column>
                      </el-table>
                    </div>
                  </el-aside>
                </el-container>
              </div>
              <div class="middle-content" v-if="visitid[1]">
                  <el-container class="inner-content">
                     <el-main>
                        <div class="middle2-h">
                            景区游客分布
                        </div>
                        <div class="middle-map">
                            <!-- 暂用地图 -->
                            <img class="map-img" src="../../../static/image/map-ninghai.png" alt="">
                            <div class="svgMap">
                                <my-svg width="100%" height="100%"></my-svg>
                            </div>
                         </div>  
                    </el-main>
                    <el-aside width="36%" class="middle-aside">
                            
                    </el-aside> 
                  </el-container>    

              </div>
              <div class="middle-content" v-if="visitid[2]">

              </div>
    </div>          
</template>

<script>
import * as d3 from 'd3';
import mySvg from '@/components/svg/MySvg.vue'
export default {
  name: 'mdlunbo',
  data() {
     return{
      tableData:[{//重点区域人流量
          date: 'NO.01',
          name: '西子国际',
          province: '上海' 
      },{
          date: 'NO.02',
          name: '客运枢纽',
          province: '上海'
      },{
          date: 'NO.03',
          name: '客运枢纽',
          province: '上海'
      }],
      timer: null,
      ary1:[{
          date: 'NO.01',
          name: '西子国际',
          province: '1168人' 
      },{
          date: 'NO.02',
          name: '客运枢纽',
          province: '661人'
      },{
          date: 'NO.03',
          name: '客运枢纽',
          province: '540人'
      }],
      ary2:[{
          date: 'NO.04',
          name: '西子国际',
          province: '455人' 
      },{
          date: 'NO.05',
          name: '客运枢纽',
          province: '432人'
      },{
          date: 'NO.06',
          name: '客运枢纽',
          province: '385人'
      }],
       targe:1,
      tableData2:[{//重点乡镇客流量
        date: 'NO.01',
        name: '跃龙街道',
        num: '3116人'
      },{
        date: 'NO.02',
        name: '桃源街道',
        num: '2435人'
      },{
        date: 'NO.03',
        name: '西店镇',
        num: '1562人'
      },{
        date: 'NO.04',
        name: '梅岭街道',
        num: '785人'  
      },{
        date: 'NO.05',
        name: '长街镇',
        num: '370人'
      },{
        date: 'NO.06',
        name: '强蛟镇',
        num: '301人'
      },{
        date: 'NO.07',
        name: '力洋镇',
        num: '291人'
      },{
        date: 'NO.08',
        name: '深川镇',
        num: '276人'  
      },{
        date: 'NO.09',
        name: '桥头胡街道',
        num: '255人'
      },{
        date: 'NO.10',
        name: '黄坛镇',
        num: '211人'
      }],
      isvisiable1:false,
      visitid:[false,true,false],
     } 
  },
  props:{},
  computed:{},
  watch:{},
  created() {
      this.setTimer();
  },
  methods:{
      // 每5秒中换一批数据
      setTimer(){
         this.timer = setInterval( () => {
           this. tableData=[];
           if(this.targe==1){
              this. tableData = this.ary2;
           }else{
             this. tableData = this.ary1;
           }
           console.log('0000');
         },5000) 
      }
  },
  components:{
     mySvg
  }
}
</script>


<style scoped>
/* 开始-----------*/
.middle-content{
  position: absolute;
  top: 10%;
  left: 8%;
  /* background-color: palegoldenrod; */
  display: inline-block !important;
  width: 84%;
  height: 80%;
}

.middle-h{
  text-align: left;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;

}
.middle-h>span{
  display: inline-block;
  padding-left: 10px;
  font-weight: bold;
  color: #4da1f7;
}
.middle-aside{
  /* background-color: red; */
}

.inner-content{
  height: 100%;
  width: 100%;
}
.middle-map{
  position: relative;
  top: 12%;
  overflow:visible !important;
}
.map-img{
  width:100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.svgMap{
  /* background-color: #4da1f7; */
  position:absolute;
  top: 0px;
  left: 0px;
  overflow:visible !important;
}
.ren-num{
  background: url(../../../static/image/focusArea_bg.png) no-repeat;
  background-size: 100% 100%;
  width: 99%;
  height: 25%;
  margin: auto;
  overflow:hidden !important;
}
.ke-num{
  position: relative;
  top:10px;
  background: url(../../../static/image/num-bg.png) no-repeat;
  background-size: 100% 100%;
  width: 99%;
  height: 63%;
  margin:10px auto 0;
  overflow:hidden !important;
}
.liuliang{
  color: yellow;
  position: relative;
  top: 5px;
  font-size: 1rem;
}
/* 结束-----------*/
.middle2-h{
 
  background: url(../../../static/image/inner-title.png) no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  height: 2.3em;
  width: 40%;
  line-height: 2.3em;
}


</style>


<style>
.el-table{
  font-size:12px;
  color:white;
}
.el-table th, .el-table tr {
  background-color:transparent;
  border:none;
}
tr{
  border:none;
}
</style>